<template>

  <Card title="书本阅读占比" :loading="loading">
    <template #extra>

      <div class="top">
        <div class="title">书本阅读占比</div>
        <Calendar style="margin-left: 15px;width: 100%;"  :fullscreen="false" @panelChange="onPanelChange"
                  valueFormat="YYYY-MM"/>
      </div>
    </template>

    <div ref="chartRef" :style="{ width, height }" ></div>
  </Card>

<!--  <div>-->
<!--    <span style="margin-right: 5px" v-for="item in 30">刘是是</span>-->
<!--  </div>-->
</template>
<script lang="ts" setup>
  import { Ref, ref, watch,onMounted } from 'vue';
  import { Card ,Calendar } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { bookPieCountApi } from '@/api/sys/sysData';
  import {useMessage} from "@/hooks/web/useMessage";
  const { createMessage } = useMessage();
  import util from "@/utils/util";


  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
  });
  const dateStr=ref(util.times("ym"));
  const dateType=ref("month");

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const colorArr=[
    '#5ab1ef',
    '#b6a2de',
    '#67e0e3',
    '#2ec7c9',
    '#ba55b3',
    '#e26262',
    '#b4580b',
    '#388da2',
    '#5c755c',
    '#48d1cc',
    '#B0C4DE',
    '#87CEEB',
    '#FFB6C1',
    '#2f8306',
  ]
  watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return;
      }
      initFn();
    },
    { immediate: true },
  );





  function chartFn(params){
    console.log("params:",params)
  }
  function onPanelChange(value,mode){
    dateType.value=mode;
    let text="";
    if(mode=="year"){
      let arr=value.split("-");
      text=arr[0];
    }else{
      text=value;
    }
    dateStr.value=text;
    initFn();
  }
  function initFn(){
    bookPieCountApi({
      dateStr:dateStr.value,
      dateType:dateType.value,
    }).then(res=>{
      if(res.code==200){
        let list = res.data;
        let dataList=[];
        list.forEach(r=>{
          let json={
            ...r,
            value:r.num,
            name: `《${r.bookName}》 \n ${r.num}人`
          }
          dataList.push(json);
        });
        if(dataList.length>0){
          setOptionFn(dataList);
        }
      }else{
        createMessage.error(res.message);
      }
    })
  }


  function splitArray(array, size) {
    var result = [];
    for (var i = 0; i < array.length; i += size) {
      result.push(array.slice(i, i + size));
    }
    return result;
  }

  function setOptionFn(arr){
    let data=[
      { value: 50, name: '《活法》' },
      { value: 31, name: '《哲学手册》' },
      { value: 27, name: '《非暴力沟通》' },
      { value: 40, name: '《正能量》' },
      { value: 10, name: '《组织与管理》' }
    ];

    setOptions({
      tooltip: {
         trigger: 'item',
       // trigger: 'axis',
        formatter:function (params) {
          // console.log(params);
          let data=params.data;
          let num=data.num;
          let ms=``;
          let new_arr=splitArray(data.users,10);

          new_arr.forEach(e=>{
            ms+= `<div>`;
            e.forEach(r=>{
              ms+=`<span style="margin-right: 5px">${r}</span>`
            })
            ms+= `</div>`;
          })
          let txt=`<div style=\\"margin-right:4px;border-radius:10px;\\">
                  <div>《${data.bookName}》阅读人数${num}</div>
                    <div>${ms}</div>
                 </div>`
          return txt
        }
      },

      series: [
        {
          name: '书本阅读人数',
          type: 'treemap',
          // radius: '80%',
          center: ['50%', '50%'],
          // color: colorArr, //colorArr
          data: arr.sort(function (a, b) {
            return a.value - b.value;
          }),
          levels:[
            {
              color:[
                "#5470c6",
                "#91cc75",
                "#c08605",
                "#ee6666",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc",
                '#388da2',
                '#5c755c',
                '#ba55b3',
                '#2f8306',
              ]
            }
          ],
          progressive: 0,
          // left: "center",
          // top: "middle",
          // width: "60%",
          // height: "60%",

          roseType: 'radius',
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function () {
            return Math.random() * 400;
          },
        },
      ],
    });
  }


</script>
<style lang="less">
.top{
  display: flex;
  justify-items: center;
  .ant-picker-panel{
    display: none;
  }
  .title{
    width: 100px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
}

</style>
